<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增投标保函')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: bootstrap-fileinput-css" />

    <style type="text/css">
        table label.error{position: inherit;}select + label.error{z-index:1;right:40px;}
        .modal-body {
            max-height: 400px;
            overflow-y: auto;
        }
    </style>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-bidding-add">
            <input type="hidden" class="form-control" id="qiyeData" name="qiyeData"  placeholder="请输入姓名">
            <h4 class="form-header h4">项目信息</a></h4>
            <div class="row">
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">业务员：</label>
                        <div class="col-sm-8">
                            <input name="userId" class="form-control" type="text">
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">受益人名称：</label>
                        <div class="col-sm-8">
                            <input name="syName" class="form-control" type="text">
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">项目名称：</label>
                        <div class="col-sm-8">
                            <input name="xmName" class="form-control" type="text">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <h4 class="form-header h4">标段信息</a></h4>

                    <button type="button" id="button-open-4" class="btn btn-white btn-sm"><i class="fa fa-plus"> 增加</i></button>
                    <div class="col-sm-12 select-table table-striped">
                        <table id="bootstrap-table"></table>
                    </div>
                </div>
            </div>
            <h4 class="form-header h4"></a></h4>
            <div class="row" id="element1">
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">省：</label>
                        <div class="col-sm-8">
                            <select name="sheng" class="province form-control m-b" data-first-title="选择省"  required>
                                <option value="">请选择</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">市：</label>
                        <div class="col-sm-8">
                            <select  name="shi" class="city form-control m-b"  data-first-title="选择市" required>
                                <option value="">请选择</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">项目所在地：</label>
                        <div class="col-sm-8">
                            <input name="xmAddress" class="form-control" type="text">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">是否特殊项目：</label>
                        <div class="col-sm-8">
                            <div class="radio-box">
                                <input type="radio" id="radio1"  name="xmSpecial" value="0">
                                <label for="radio1">否</label>
                            </div>
                            <div class="radio-box">
                                <input type="radio" id="radio2" name="xmSpecial" value="1">
                                <label for="radio2">是</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">特殊项目名称：</label>
                        <div class="col-sm-8">
                            <input name="xmSpecialName" class="form-control" type="text">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">开标时间：</label>
                        <div class="col-sm-8">
                            <div class="input-group date">
                                <input name="xmKbdate" class="form-control" placeholder="yyyy-MM-dd" type="text">
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">投标有效期：</label>
                        <div class="col-sm-8">
                            <input name="xmValidity" class="form-control" type="text">
                        </div>
                    </div>
                </div>
<!--                <div class="col-xs-4">-->
<!--                    <div class="form-group">-->
<!--                        <label class="col-sm-3 control-label">项目的上传文件：</label>-->
<!--                        <div class="col-sm-8">-->
<!--                            <input name="xmFileUrl" class="form-control" type="text">-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <label class="col-sm-1 control-label">项目的上传文件：</label>
                        <div class="col-sm-10">
                            <div class="file-loading">
                                <input id="multipleFile" name="files" type="file" multiple>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">关联投标企业ID：</label>
                        <div class="col-sm-8">
                            <input name="qyId" class="form-control" type="text">
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">受理意见：</label>
                        <div class="col-sm-8">
                            <input name="acceptanceOpinion" class="form-control" type="text">
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">价格：</label>
                        <div class="col-sm-8">
                            <input name="price" class="form-control" type="text">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">补充资料Url：</label>
                        <div class="col-sm-8">
                            <input name="supplyUrl" class="form-control" type="text">
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">特殊备注：</label>
                        <div class="col-sm-8">
                            <input name="specialRemark" class="form-control" type="text">
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">签约资料包：</label>
                        <div class="col-sm-8">
                            <input name="contractData" class="form-control" type="text">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">资料包是否合格：</label>
                        <div class="col-sm-8">
                            <input name="contractHg" class="form-control" type="text">
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">补充文件描述：</label>
                        <div class="col-sm-8">
                            <input name="supplyRemark" class="form-control" type="text">
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">总费用：</label>
                        <div class="col-sm-8">
                            <input name="totalMoney" class="form-control" type="text">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">银行成本：</label>
                        <div class="col-sm-8">
                            <input name="bankMoney" class="form-control" type="text">
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">银行账户：</label>
                        <div class="col-sm-8">
                            <input name="bankAccount" class="form-control" type="text">
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">是否收到：</label>
                        <div class="col-sm-8">
                            <input name="bankSf" class="form-control" type="text">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">银行成本2：</label>
                        <div class="col-sm-8">
                            <input name="bankMoney2" class="form-control" type="text">
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">银行账户2：</label>
                        <div class="col-sm-8">
                            <input name="bankAccount2" class="form-control" type="text">
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">是否收到2：</label>
                        <div class="col-sm-8">
                            <input name="bankSf2" class="form-control" type="text">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">返润：</label>
                        <div class="col-sm-8">
                            <input name="fanMoney" class="form-control" type="text">
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">扣税：</label>
                        <div class="col-sm-8">
                            <input name="taxMoney" class="form-control" type="text">
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">业绩：</label>
                        <div class="col-sm-8">
                            <input name="yeji" class="form-control" type="text">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">是否开票：</label>
                        <div class="col-sm-8">
                            <input name="sfKp" class="form-control" type="text">
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">出函日期：</label>
                        <div class="col-sm-8">
                            <div class="input-group date">
                                <input name="bhDate" class="form-control" placeholder="yyyy-MM-dd" type="text">
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">邮寄单号：</label>
                        <div class="col-sm-8">
                            <input name="mailNum" class="form-control" type="text">
                        </div>
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="col-sm-offset-5 col-sm-10">
                    <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                    <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
                </div>
            </div>

            <!-- 模态框 -->
            <div class="modal fade" data-backdrop="false"  id="myModal5" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" style="margin-top:28px;">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body" >
                            <!-- 表单开始 -->
                            <form id="myForm">
                                <input type="hidden" class="form-control" id="index" name="index"  placeholder="请输入姓名">

                                <div class="mb-3">
                                    <label for="name" class="form-label">企业姓名</label>
                                    <input type="text" class="form-control" id="name" name="name"  placeholder="请输入姓名">
                                </div>
                                <div class="mb-3">
                                    <label for="address" class="form-label">企业地址</label>
                                    <input type="text" class="form-control" id="address" name="address" placeholder="企业地址">
                                </div>
                                <div class="mb-3">
                                    <label for="kpName" class="form-label">开票名称</label>
                                    <input type="text" class="form-control" id="kpName" name="kpName" placeholder="开票名称">
                                </div>
                                <div class="mb-3">
                                    <label for="bhMoney" class="form-label">保函金额</label>
                                    <input type="text" class="form-control" id="bhMoney" name="bhMoney" placeholder="保函金额">
                                </div>
                                <div class="mb-3">
                                    <label for="bhMoney" class="form-label">保函金额</label>
                                    <input type="text" class="form-control" id="bhMoney" name="bhMoney" placeholder="保函金额">
                                </div>
                                <div class="mb-3">
                                    <label for="bhMoney" class="form-label">保函金额</label>
                                    <input type="text" class="form-control" id="bhMoney" name="bhMoney" placeholder="保函金额">
                                </div>
                                <div class="mb-3">
                                    <label for="kpName" class="form-label">开票名称</label>
                                    <input type="text" class="form-control" id="kpName" name="kpName" placeholder="开票名称">
                                </div>
                                <div class="mb-3">
                                    <label for="bhMoney" class="form-label">保函金额</label>
                                    <input type="text" class="form-control" id="bhMoney" name="bhMoney" placeholder="保函金额">
                                </div>
                                <div class="mb-3">
                                    <label for="bhMoney" class="form-label">保函金额</label>
                                    <input type="text" class="form-control" id="bhMoney" name="bhMoney" placeholder="保函金额">
                                </div>
                                <div class="mb-3">
                                    <label for="bhMoney" class="form-label">保函金额</label>
                                    <input type="text" class="form-control" id="bhMoney" name="bhMoney" placeholder="保函金额">
                                </div>
                                <div class="mb-3">
                                    <label for="kpName" class="form-label">开票名称</label>
                                    <input type="text" class="form-control" id="kpName" name="kpName" placeholder="开票名称">
                                </div>
                                <div class="mb-3">
                                    <label for="bhMoney" class="form-label">保函金额</label>
                                    <input type="text" class="form-control" id="bhMoney" name="bhMoney" placeholder="保函金额">
                                </div>
                                <div class="mb-3">
                                    <label for="bhMoney" class="form-label">保函金额</label>
                                    <input type="text" class="form-control" id="bhMoney" name="bhMoney" placeholder="保函金额">
                                </div>
                                <div class="mb-3">
                                    <label for="bhMoney" class="form-label">保函金额</label>
                                    <input type="text" class="form-control" id="bhMoney" name="bhMoney" placeholder="保函金额">
                                </div>
                                <div class="mb-3">
                                    <label for="kpName" class="form-label">开票名称</label>
                                    <input type="text" class="form-control" id="kpName" name="kpName" placeholder="开票名称">
                                </div>
                                <div class="mb-3">
                                    <label for="bhMoney" class="form-label">保函金额</label>
                                    <input type="text" class="form-control" id="bhMoney" name="bhMoney" placeholder="保函金额">
                                </div>
                                <div class="mb-3">
                                    <label for="bhMoney" class="form-label">保函金额</label>
                                    <input type="text" class="form-control" id="bhMoney" name="bhMoney" placeholder="保函金额">
                                </div>
                                <div class="mb-3">
                                    <label for="bhMoney" class="form-label">保函金额</label>
                                    <input type="text" class="form-control" id="bhMoney" name="bhMoney" placeholder="保函金额">
                                </div>

                            </form>
                            <!-- 表单结束 -->
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" onclick="modalClose()" data-bs-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" onclick="submitForm()">提交</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>



    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:src="@{/js/jquery.tmpl.js}"></script>
    <th:block th:include="include :: jquery-cxselect-js" />
    <th:block th:include="include :: bootstrap-fileinput-js" />

    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('system:bidding:edit')}]];
        var removeFlag = [[${@permission.hasPermi('system:bidding:remove')}]];
        var data = [
        ];
        var filedata = [
        ];
        $(document).ready(function () {
            // 多图上传
            $("#multipleFile").fileinput({
                uploadUrl: ctx + 'common/uploads',
                uploadAsync: false
            }).on('filebatchuploadsuccess', function (event, data, previewId, index) {
                var rsp = data.response;
                log.info("return urls1：" + data.urls)
                log.info("return urls：" + rsp.urls)
                log.info("reutrn fileNames：" + rsp.fileNames)
                log.info("reutrn newFileNames：" + rsp.newFileNames)
                log.info("return originalFilenames：" + rsp.originalFilenames)
                filedata.push(rsp.fileNames);
                log.info("return filedata：" + filedata)
            }).on('fileremoved', function (event, id, index) {
                log.info("return filedata：" + event.currentTarget.id)
                log.info("return filedata：" + id)
                log.info("return filedata：" + index)
                filedata.splice(index, 1)
                log.info("return filedata：" + filedata)
                $("input[name='" + event.currentTarget.id + "']").val('')
            })
        });
        $(function() {
            // 初始化数据, 可以由后台传过来
            var data = data;
            var options = {
                data: data,
                pagination: false,
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                sidePagination: "client",
                columns: [
                    {
                        field: 'index',
                        align: 'center',
                        title: "序号",
                        formatter: function (value, row, index) {
                            var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                            var columnId = $.common.sprintf("<input type='hidden' name='qiyes[%s].id' value='%s'>", index, row.id);
                            return columnIndex + $.table.serialNumber(index) + columnId;
                        }
                    },
                    {
                        field: 'name',
                        align: 'center',
                        title: '企业名称',
                        formatter: function(value, row, index) {
                            return value;
                        }
                    },
                    {
                        field: 'address',
                        align: 'center',
                        title: '企业所在地',
                        formatter: function(value, row, index) {
                            return value;
                        }
                    },
                    {
                        field: 'kpName',
                        align: 'center',
                        title: '开票名称',
                        formatter: function(value, row, index) {
                            return value;
                        }
                    },
                    {
                        field: 'bhMoney',
                        align: 'center',
                        title: '保函金额',
                        formatter: function(value, row, index) {
                            return value;
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        formatter: function(value, row, index) {
                            var value = $.common.isNotEmpty(row.index) ? row.index : $.table.serialNumber(index);
                            var actions = [];
                            actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="updateRow(\'' + index + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                            actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="removeRow(\'' + index + '\')"><i class="fa fa-remove"></i>删除</a>');
                            return actions.join('');
                        }
                    }]
            };
            $.table.init(options);
        });
        var prefix = ctx + "system/bidding"
        $("#form-bidding-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $('#qiyeData').val(JSON.stringify(this.data));
                $.operate.save(prefix + "/add", $('#form-bidding-add').serialize());
            }
        }

        $("input[name='xmKbdate']").datetimepicker({
            format: "yyyy-mm-dd hh:ii",
            minView: "month",
            autoclose: true
        });

        $("input[name='bhDate']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
        var urlChina =prefix+'/cityData';
        $.cxSelect.defaults.url = urlChina;
        $('#element1').cxSelect({
            selects: ['province', 'city'],
            nodata: 'none'
        });
        function updateRow(index) {
            console.log(index);
            var row = data[index];
            $('#index').val(index);
            $('#name').val(row.name);
            $('#address').val(row.address);
            $('#kpName').val(row.kpName);
            $('#bhMoney').val(row.bhMoney);
            $('#myModal5').modal('show');
        }
        function removeRow(index) {
            data.splice(index, 1)
            $('#bootstrap-table').bootstrapTable('load', data);
        };
        $("#button-open-4").click(function(){
            // var row={"index":1,"name":"企业名称","address":"企业所在地","kpName":"开票名称","bhMoney":"保函金额"};
            // var row1={"index":2,"name":"企业名称1","address":"企业所在地1","kpName":"开票名称","bhMoney":"保函金额"};
            // data[0]=row;
            // data[1]=row1;
            // $('#bootstrap-table').bootstrapTable('load', data);
            fromReset();
            $('#myModal5').modal('show');
        });

        function submitForm() {
            var index = $('#index').val();

            var name = $('#name').val();
            var address = $('#address').val();
            var kpName = $('#kpName').val();
            var bhMoney = $('#bhMoney').val();
            var row = {"name":name,"address":address,"kpName":kpName,"bhMoney":bhMoney};
            if(index!=''){
                data[index]=row;
            }else{
                data.push(row);
            }

            $('#bootstrap-table').bootstrapTable('load', data);
            fromReset();
            $('#myModal5').modal('hide');
        }

        function modalClose() {
            fromReset();
            $('#myModal5').modal('hide');
        };
        function fromReset() {
            //重置表单数据
            var index = $('#index').val('');
            var name = $('#name').val('');
            var address = $('#address').val('');
            var kpName = $('#kpName').val('');
            var bhMoney = $('#bhMoney').val('');
        }

    </script>

</body>




</html>


